<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>计算属性</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!--
    计算属性：计算出来的结果，保存在属性中。
        用一个function也可以实现，为什么要用它呢？
        - 内存中运行 虚拟DOM技术。（虚拟DOM可以理解为缓存）

    methods 和 computed 不能重名。重名之后，只会调用 methods 方法~！

    从侧面节省了浏览器的成本。

    计算属性真的可以理解为缓存~~~！！！
-->
<div id="app">
  方法当前时间戳： {{nowTime1()}}
  <hr/>
  计算属性时间戳： {{nowTime2}}
</div>
<!--
    页面刷新感觉没什么变化？
        but 打开控制台，多调用几次 会发现两个不同。
            - 方法会不停的变化。
            - 计算属性的不变化。（类似缓存了）
                跟Redis缓存一样，想改变缓存 添加增删改操作。
                计算属性值发生改变，只需要让它前面的值发生改变（控制台修改msg的值）。
-->
</body>
<script>
  var vm = new Vue({
    el: "#app",
    data: {
      msg: "你好啊，我来了~！"
    },
    // 计算属性
    computed: {
      /*全写：计算属性是有get()和set()方法的，类似Java实体类提供的getter、setter方法~！*/
      msg: {
        get() {
          return this.msg;
        },
        set(newValue) {
          return newValue;
        }
      },
      /*简写方法：一般都只会用到计算属性的get()方法*/
      nowTime2: function () {
        this.msg;
        return Date.now();
      }
    }
  })
</script>
</html>